'use strict';
import React, { Component } from 'react';
import logo from './logo.svg';
import styles from './App.less';
import { observer, Provider } from 'mobx-react';
import { Router, Switch, Route } from 'react-router-dom';
import routers, { history } from './router';
import { Menu, Icon } from 'antd';
import { socket } from './store';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

@observer
class App extends Component {
	render() {
		// console.log('render app...');
		const { store } = this.props;
		return (
			<div className={styles.App}>
				<header>
					<img src={logo} className={styles.logo} />
					<span className={styles.title}>wxd</span>
					<span
						style={{ marginLeft: 10, fontSize: 10, verticalAlign: 'bottom' }}
					>
						{store.netState}.{socket.id}
					</span>
				</header>
				<Provider {...this.props}>
					<Router history={history}>
						<div
							style={{
								display: 'flex',
								flexDirection: 'column',
								flex: '1 1 auto',
							}}
						>
							<Menu
								mode="horizontal"
								onClick={e => {
									history.push(e.key);
								}}
							>
								{routers.map((route, i) => {
									return (
										<Menu.Item key={route.path}>
											<Icon type={route.icon} />
											{route.name}
										</Menu.Item>
									);
								})}
							</Menu>
							<Switch>
								{routers.map((route, i) => {
									return (
										<Route
											key={i}
											path={route.path}
											exact={route.exact}
											component={route.component}
											style={{ height: 300 }}
										/>
									);
								})}
							</Switch>
						</div>
					</Router>
				</Provider>
			</div>
		);
	}
}

export default App;
export var version = new Date().getSeconds();
